{extend name="public/base"/}
{block name="style"}
<style type="text/css">
    .layui-card-body > div:first-child {width: auto;height:400px;}
</style>
{/block}
{block name="body"}
<div class="space-box">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header layui-form">
                    <div class="layui-col-xs1">
                        <select name="year"  lay-filter="year" id="year-select">
                            {foreach $year as $y}
                            <option value="{$y}">{$y}年</option>
                            {/foreach}
                        </select>
                    </div>
                </div>
                <div class="layui-card-body">
                    <div id="year-sales"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header layui-form">
                    <div class="layui-col-xs1">
                        <select name="day"  lay-filter="day">
                            {foreach $days as $d}
                            <option {if $d ==7}selected{/if} value="{$d}">{$d}天</option>
                            {/foreach}
                        </select>
                    </div>
                </div>
                <div class="layui-card-body">
                    <div id="top-ten"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div id="country-ten"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div id="account-ten"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div id="channel-order"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div id="sale-ten"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script src="/static/admin/js/echarts.min.js"></script>
<script src="/static/admin/js/MyChart.js"></script>
<script type="text/javascript">
    layui.use(['layer', 'jquery', 'form'], function()
    {
        var  layer = layui.layer
            , form = layui.form
            , $ = layui.jquery;
        // 连动多少天订单
        form.on('select(day)', function(data)
        {
            layer.load(0, {shade: false});
            renderChartDay(data.value);
            layer.closeAll('loading');
        });
        renderChartDay();
        function renderChartDay(day)
        {
            day = day || 7;
            var url = "{:url('')}?day=" + day + "&"
            $.get(url + "type=topTen").done(function(response)
            {
                MyChart.bar($("#top-ten"), response.data);
            });
            $.get(url + "type=country").done(function(response)
            {
                MyChart.pie($("#country-ten"), response.data);
            });
            $.get(url + "type=account").done(function(response)
            {
                MyChart.pie($("#account-ten"), response.data);
            });
            $.get(url + "type=channel").done(function(response)
            {
                MyChart.pie($("#channel-order"), response.data);
            });

            $.get(url + "type=sale").done(function(response)
            {
                MyChart.pie($("#sale-ten"), response.data);
            });
        }

        // 查看指定年份订单
        form.on('select(year)', function(data)
        {
            renderChartYear(data.value);
        });
        renderChartYear();
        function renderChartYear(year)
        {
            year = year || $("#year-select").val();
            var url = "{:url('')}?year=" + year + "&"
            $.get(url + "type=month").done(function(response)
            {
                var data = response.data;
                data.formatterTip = function(params)
                {
                    if(params[0]["data"].value === null) return "";
                    return `
                    <span class="strStyle"></span>订单数：${params[0]["data"].value}<br>
                    <span class="strStyle"></span>销售额：${params[0]["data"].total_price}
                    `;
                };
                MyChart.bar($("#year-sales"), data);
            });
        }
    });
</script>
{/block}